<template>
  <div class="app-container">
    <div class="filter-container clearfix">
      <el-select v-model="listQuery.child_type" class="filter-item" style="width: 300px;" clearable multiple :loading="loading" placeholder="选择监控类型">
        <el-option
          v-for="item in data_type"
          :key="item.id"
          :label="item.label"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-date-picker v-model="listQuery.start_date" class="filter-item" type="date" style="width: 140px;" placeholder="开始日期"></el-date-picker>-
      <el-date-picker v-model="listQuery.end_date" class="filter-item" type="date" style="width: 140px;" placeholder="结束日期"></el-date-picker>
      <el-button class="filter-item" type="primary" plain icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button v-if="checkPermission(permissionRoles.monitor_server_config_add)" class="filter-item" type="primary" icon="el-icon-plus" @click="handleAdd">监控配置</el-button>
    </div>
    <el-table ref="table" v-loading="listLoading" :data="list" border stripe style="width: 100%;" height="830">
      <el-table-column label="异常时间" prop="create_dt" width="200px" align="center"></el-table-column>
      <el-table-column label="监控类型" prop="child_type" width="110px" align="center">
        <template slot-scope="scope">
          {{ getLabelById(scope.row.child_type) || scope.row.child_type }}
        </template>
      </el-table-column>
      <el-table-column label="异常功能" prop="child_type" width="110px" align="center">
        <template slot-scope="scope">
          {{ getLabelByTag(scope.row.tag) || scope.row.tag }}
        </template>
      </el-table-column>

      <el-table-column label="监控数值" prop="config_num" width="140px" align="center"></el-table-column>
      <el-table-column label="异常数值" prop="val" width="140px" align="center"></el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisible" title="监控配置" :close-on-click-modal="false">
      <el-form ref="dataForm" :model="form" label-width="110px" label-position="right">
        <div v-for="tdata in data_type" :key="tdata.id">
          <!-- 注册和活跃监控开关 -->
          <el-form-item :label="tdata.label">
            <el-switch v-model="form[tdata.id].status" active-text="开" inactive-text="关" active-value="1" inactive-value="0"></el-switch>
          </el-form-item>
          <!-- 监控值时间 -->
          <el-form-item label="监控时间" style="margin-left: 80px">
            <el-col :md="8">
              <el-input v-model="form[tdata.id].frequency" placeholder="输入数值" />
            </el-col>
            <el-col :md="8">
              <span style="margin-left: 10px;">分钟</span>
            </el-col>
          </el-form-item>
          <!-- 监控值数值 -->
          <el-form-item label="监控数值" style="margin-left: 80px">
            <el-col :md="8">
              <el-input v-model="form[tdata.id].num" placeholder="输入数值" />
            </el-col>
          </el-form-item>
        </div>
      </el-form>
      <div class="tr">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmSubmit()">确定</el-button>
      </div>
    </el-dialog>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>
import checkPermission from '@/utils/permission' // 权限判断函数
import waves from '@/directive/waves' // 实现点击波浪纹
import { deepClone } from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { handleMonitorDataConfig, getMonitorDataTypeConfig, getMonitorDataList, getMonitorDataConfig } from '@/api/monitor'

const data_type = 'data'
export default {
  name: 'MonitorServer',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      permissionRoles: this.$store.state.user.permissionRoles,
      list: [],
      tags: [],
      data_type: [],
      total: 0,
      loading: false,
      listLoading: false,
      form: {
        register: {
          type: 'register',
          frequency: '',
          status: '0'
        },
        dau: {
          type: 'dau',
          frequency: '',
          status: '0'
        }
      },
      listQuery: {
        start_date: new Date(Date.now() - 86400000 * 7),
        end_date: new Date(),
        page: 1,
        limit: 200,
        child_type: [],
        tag: [],
        type: data_type
      },
      dialogVisible: false
    }
  },
  created() {
    this.getTypeConfigList()
    // this.getList()
  },
  methods: {
    checkPermission,
    getLabelByTag(tag) {
      const item = this.tags.find(item => item.id === tag)
      return item ? item.label : tag
    },
    getLabelById(id) {
      const item = this.data_type.find(item => item.id === id)
      return item ? item.label : id
    },
    getQuery() {
      const query = Object.assign({}, this.listQuery)
      if (query.child_type.length === 0) {
        query.child_type = this.data_type.map(item => item.id)
      }
      return query
    },
    async getTypeConfigList() {
      const res = await getMonitorDataTypeConfig()
      this.data_type = res.data.data_type
      this.tags = res.data.tag_type
      this.getList()
    },
    async getList() {
      this.listLoading = true
      const res = await getMonitorDataList(this.getQuery())
      this.listLoading = false
      this.list = res.data.items
      this.total = res.data.total
      // this.items = res.data.item
    },
    handleFilter() {
      this.getList()
    },
    handleAdd() {
      this.getMonitorDataConfig()
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    confirmSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          handleMonitorDataConfig(this.form).then(response => {
            if (response.status) {
              this.dialogVisible = false
              this.getList()
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
            } else {
              this.message.error(response.message)
            }
          })
        }
      })
    },
    async getMonitorDataConfig() {
      const res = await getMonitorDataConfig()
      const forms = {}
      if (res.data.length > 0) {
        for (const index in res.data) {
          const type = res.data[index]['type']
          const form = { status: res.data[index]['status'].toString(), frequency: res.data[index]['frequency'], num: res.data[index]['ext1'] }
          forms[type] = form
        }
        console.log(forms)
        this.form = forms
        this.form = deepClone(this.form)
      }
    }
  }
}
</script>
<style scoped>
</style>
